<div class = "123">
    <el-form    label-width="100%">
        <el-form-item label="">
        </el-form-item>
    </el-form>
    <!--表格查询-->

    <el-form :inline="true" :model="checkFormInline" class="demo-form-inline">
        <el-row>
       <el-col :span="22">
        <el-form-item label="公司名">
            <el-input v-model="checkFormInline.companyName" placeholder="公司名"></el-input>
        </el-form-item>
        <el-form-item label="供货商简称">
            <el-input v-model="checkFormInline.supplierAbbr" placeholder="供货商简称"></el-input>
        </el-form-item>
        <el-button type="primary" @click="checkSupplier()">查询</el-button>
       </el-col>
            <el-col :span="2">
            <el-button  @click="addSupplier()" type="primary">添加供货商</el-button>
            </el-col>
        </el-row>
    </el-form>
    <!--表格数据-->
    <template>
        <kf-table
                ref="supplierTable"
                :data="supplierData"
                one-screen
                layout="total, sizes, prev, pager, next, jumper"
        >
            <el-table-column prop="companyName"  label="公司名" width="100">
            </el-table-column>
            <el-table-column prop="supplierAbbr" label="供货商简称" width="100">
            </el-table-column>
            <el-table-column prop="mainContact" label="主联系人" width="100">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="联系电话" width="100">
            </el-table-column>
            <el-table-column prop="email" label="电子邮箱" width="100">
            </el-table-column>
            <el-table-column prop="fax" label="传真" width="100">
            </el-table-column>
            <el-table-column prop="address" label="通讯地址" width="100">
            </el-table-column>
            <el-table-column prop="postcode" label="邮编" width="100">
            </el-table-column>
            <el-table-column prop="gender" label="性别"width="100">
            </el-table-column>
            <el-table-column prop="duty" label="职务" width="100">
            </el-table-column>
            <el-table-column prop="qqOrMsn" label="QQ/MSN" width="100">
            </el-table-column>
            <el-table-column prop="url" label="网址" width="100">
            </el-table-column>
            <el-table-column prop="saleman" label="业务员" width="100">
            </el-table-column>
            <el-table-column prop="remarks"  label="备注" width="100">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180px">
                <template scope="scope">
                    <el-button  @click="editSupplier(scope)" type="primary">修改</el-button>
                    <el-button  @click="delectSupplier(scope)" type="primary">删除</el-button>
                </template>
            </el-table-column>



            <!--模态框-添加供应商-->
            <template slot="editForm">
                <h3>添加供应商</h3>
                <el-form :inline="true" :model="addSupplierForm" ref="addSupplierForm" class="demo-form-inline">
                    <div>
                        <el-form-item label="公司名" label-width="100px"  prop="companyName">
                            <el-input v-model="addSupplierForm.companyName" ></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="供应商简称" label-width="100px" prop="supplierAbbr">
                            <el-input v-model="addSupplierForm.supplierAbbr"></el-input>
                        </el-form-item>
                        <el-form-item label="主联系人"label-width="140px" prop="mainContact">
                            <el-input v-model="addSupplierForm.mainContact"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="联系电话" label-width="100px" prop="phoneNumber">
                            <el-input v-model="addSupplierForm.phoneNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱"label-width="140px" prop="email">
                            <el-input v-model="addSupplierForm.email"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="传真" label-width="100px" prop="fax">
                            <el-input v-model="addSupplierForm.fax"></el-input>
                        </el-form-item>
                        <el-form-item label="通讯地址"label-width="140px" prop="address">
                            <el-input v-model="addSupplierForm.address"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="邮编" label-width="100px" prop="postcode">
                            <el-input v-model="addSupplierForm.postcode"></el-input>
                        </el-form-item>

                        <el-form-item label="性别"label-width="140px" prop="gender">
                                <el-col :span="12">
                            <el-radio class="radio" v-model="addSupplierForm.gender" label="男">男</el-radio>
                                </el-col>
                                <el-col :span="12">
                            <el-radio class="radio" v-model="addSupplierForm.gender" label="女">女</el-radio>
                                </el-col>
                        </el-form-item>

                    </div>
                    <div>
                        <el-form-item label="职务" label-width="100px" prop="duty">
                            <el-input v-model="addSupplierForm.duty"></el-input>
                        </el-form-item>
                        <el-form-item label="QQ/MSN"label-width="140px" prop="qqOrMsn">
                            <el-input v-model="addSupplierForm.qqOrMsn"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="网址" label-width="100px" prop="url">
                            <el-input v-model="addSupplierForm.url"></el-input>
                        </el-form-item>
                        <el-form-item label="业务员"label-width="140px" prop="saleman">
                            <el-input v-model="addSupplierForm.saleman"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="备注" label-width="100px" prop="remarks">
                            <el-input  type="textarea" v-model="addSupplierForm.remarks"></el-input>
                        </el-form-item>
                    </div>

                </el-form>
            </template>
            <template slot="formBtn">
                <el-button  @click="clear()">取 消</el-button>
                <el-button type="primary" @click="saveSupplierMgr()">确定保存</el-button>
            </template>
        </kf-table>
    </template>

</div>